// 歌单详情界面
<template>
  <div class="details">
    <loading :value="LoadShow"/>
    <music-list :list="list" @select="selectItem" />
  </div>
</template>

<script>
import { getPlaylistDetail } from 'api';
import musicList from '@/components/musicList/index.vue';
import loading from '@/components/loading/index.vue';
import { mapActions } from 'vuex';
import mixin from '@/util/mixin';

export default {
  name: 'Details',
  props: {
    params: {
      id: Number,
    },
  },
  data() {
    return {
      list: [],
    };
  },
  // 引用混入
  mixins: [mixin],
  components: {
    musicList,
    loading,
  },
  created() {
    this.getDetails();
  },
  watch: {
    $route(to) {
      this.LoadShow = true;
      this.list = [];
      if (to.params.id !== undefined) { this.getDetails(); }
    },
  },
  methods: {
    // 获取歌单音乐请求
    async getDetails() {
      const res = await getPlaylistDetail(this.$route.params.id);
      this.detailsId = res.id;
      this.list = res.tracks;
      this.hideLoad();
    },
    async selectItem(item, index) {
      this.selectPlay({
        list: this.list,
        index,
      });
    },
    ...mapActions(['selectPlay']),
  },
};
</script>

<style lang="scss" scoped>
.details {
  position: relative;
  height: 100%;
}
</style>
